/**
* @description: 待办工单 ==> 通信光缆巡视==> 通信光缆巡视
* @author: JiWei 接口对接：liang
* @date:
**/
<template>
  <view class="patrol-task">
    <nav-bar class="header" :background="backgroundColor" back title="通信光缆" @goBack="goBack">
      <img v-if="isAddable" slot="iconfont" src="../../../../static/img/add.png" alt="" @click="addSubmit">
      <img slot="screen" src="../../../../static/img/sx.png" alt="" @click="screen">
    </nav-bar>
    <view class="header-bar">
      <!-- 切换tab -->
      <div class="get-state-tab">
        <div class="info-tab-item"
             :class="currentTab === 'unfinished' ? ' info-tab-current': ''"
             @click="tabChange('unfinished')">未完成</div>
        <div class="info-tab-item"
             :class="currentTab === 'finished' ? ' info-tab-current': ''"
             @click="tabChange('finished')">已完成</div>
      </div>
    </view>
    <!-- 搜索框  -->
    <view class="patrol-search">
      <van-search disabled show-action v-model="searchValue" 
        left-icon="" action-text="重置" 
        right-icon="search" placeholder="请输入光缆名称" 
        @click="showSearch=true" @cancel="onSearch('')" />
    </view>
    <view class="patrol-main">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="isLoading"
          :finished="finished"
          finished-text="没有更多了"
          @load="loadMore"
        >
          <!-- 列表循环(未完成) -->
          <div v-show="currentTab === 'unfinished'">
            <view class="patrol-list" v-for="(item,index) in taskList" :key="index">
              <view class="patrol-title">
<!--                <img src="../../../../static/img/opticalCable.png" alt="">-->
                <text class="partrol-main-title">{{ item.NAME }}</text>
<!--                <van-button type="info" class="patrol-btn" @click="toReceive(item, '巡视')">巡视</van-button>-->
              </view>
              <hr class="patrol-hr">
              <view class="top-patrol-main">
                <view>
                  <text class="patrol-big-ltitle">光缆种类：</text>
                  <text class="patrol-small-ltitle">{{ item.FIBER_TYPE }}</text>
                </view>
                <view>
                  <text class="patrol-big-ltitle">光缆巡视结果：</text>
                  <text class="patrol-small-ltitle" :style="{color: fontColor(item.XSJG)}">
                    {{ item.XSJG }}
                    <!--                  （<text>{{ item.XSJG.split("巡视")[1].match(/[\u4e00-\u9fa5]/g) }}</text>）-->
                  </text>
                </view>
                <van-button type="info" class="patrol-btn" @click="toReceive(item, '巡视')">巡视</van-button>
              </view>
              <view class="bottom-state-bar">
                <view class="state-item">
                  <text class="patrol-big-ltitle">纤芯总数：</text>
                  <text class="patrol-small-ltitle">{{ item.LINE_NUMBER1 }}</text>
                </view>
                <view class="state-item red">
                  <text class="patrol-big-ltitle">待核查：</text>
                  <text class="patrol-small-ltitle">{{ item.WHC ? item.WHC : 0 }}</text>
                </view>
                <view class="state-item">
                  <text class="patrol-big-ltitle">已核查：</text>
                  <text class="patrol-small-ltitle">{{ item.YHC ? item.YHC : 0 }}</text>
                </view>
              </view>
            </view>
          </div>
          
          <!-- 列表循环(已完成) -->
          <div v-show="currentTab === 'finished'">
            <view class="patrol-list" v-for="(item,index) in taskList" :key="index" @click="toReceive(item, '查看')">
              <view class="patrol-title">
<!--                <img src="../../../../static/img/opticalCable.png" alt="">-->
                <text class="partrol-main-title">{{ item.NAME }}</text>
<!--                <van-button type="info" class="patrol-btn" @click="toReceive(item, '查看')">查看</van-button>-->
              </view>
              <hr class="patrol-hr">
              <view class="top-patrol-main">
                <view>
                  <text class="patrol-big-ltitle">光缆种类：</text>
                  <text class="patrol-small-ltitle">{{ item.FIBER_TYPE }}</text>
                </view>
                <view>
                  <text class="patrol-big-ltitle">巡视人：</text>
                  <text class="patrol-small-rtitle">{{ item.TOUR_OPER_NAME }}</text>
                </view>
                <view>
                  <text class="patrol-big-rtitle">巡视时间：</text>
                  <text class="patrol-small-ltitle">{{ item.TOUR_TIM }}</text>
                </view>
                <view>
                  <text class="patrol-big-ltitle">光缆巡视结果：</text>
                  <text class="patrol-small-ltitle" :style="{color: fontColor(item.XSJG)}">{{ item.XSJG }}</text>
                </view>
              </view>
              <view class="bottom-state-bar">
                <view class="state-item">
                  <text class="patrol-big-ltitle">纤芯总数：</text>
                  <text class="patrol-small-ltitle">{{ item.LINE_NUMBER1 }}</text>
                </view>
                <view class="state-item">
                  <text class="patrol-big-ltitle">空余纤芯：</text>
                  <text class="patrol-small-ltitle">{{ item.FREE }}</text>
                </view>
                <view class="state-item">
                  <text class="patrol-big-ltitle">已使用纤芯：</text>
                  <text class="patrol-small-ltitle">{{ item.USED }}</text>
                </view>
              </view>
            </view>
          </div>
          
        </van-list>
      </van-pull-refresh>
    </view>
    <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <search @cancel="showSearch = false;" :empty="showSearch"
              @search="onSearch" />
    </van-popup>
    <!--筛选弹窗-->
    <screenPopup
      :type-list="typeList"
      :showScreen="showScreen"
      @closePopup="showScreen=false"
      @confirm="confirmCondition"
    />
  </view>
</template>
<script>
import navBar from "../../../../components/common/nav-bar";
import screenPopup from "../../../../components/common/screenPopup";
import search from "../../../common/search";

export default {
  name: "patrolReceive",
  components: {navBar, screenPopup, search},
  props: {},
  data() {
    return {
      currentTab: "unfinished", // 当前显示内容 unfinished 未完成 finished 已完成
      backgroundColor: "#417ADC",
      refreshing: false, // 是否正在刷新
      isLoading: false,
      showScreen: false,
      showSearch: false,
      searchValue: "",
      taskList: [], // 通信光缆列表
      requestParams: {
        limit: 20,//是	int	每页大小
        page: 1,//是	int	页码
        task_id: "",//是	string	主工单id
        fiber_name: "",//否	string	光缆名称
        fiber_type: "",//否	string	光缆种类
        tour_state: "0",//是	string	0：未完成 1：已完成
      },
      total: 0, // 总条数
      finished: false,
      typeList: [], // 筛选条件列表
      isAddable: false // 是否可新增
    };
  },
  mounted () {
    this.getFiberList();
  },
  onLoad(options) {
    this.isAddable = options.state === '99' ? false : true;
    this.requestParams.task_id = options.taskId;
  },
  methods: {
    onRefresh() {
      this.isLoading = true;
      this.refreshing = true;
      this.finished = false;
      this.requestParams.page = 1;
      this.taskList = [];
      this.getFiberList();
    },
    loadMore () {
      if (this.total > this.taskList.length) {
        this.requestParams.page = this.requestParams.page + 1;
        this.getFiberList();
      } else {
        this.finished = true;
      }
    },
    addSubmit() {
      uni.navigateTo({
        url: `/pages/workBench/todoTask/cableTour/addCable/addCable?taskId=${this.requestParams.task_id}`
      });
    },
    screen() {
      this.showScreen = true;
    },
    goBack() {
      let state = this.currentTab === "unfinished" ? "0" : "1"
      uni.navigateTo({
        url: `/pages/workBench/todoTask/taskList/taskList?id=${this.requestParams.task_id}&state=${state}`
      });
    },
    onSearch(searchValue) {
      this.searchValue = searchValue;
      this.requestParams.fiber_name = this.searchValue;
      this.onRefresh();
      this.showSearch = false;
    },
    toReceive(item, btnType) {
      console.log(item.XSJG);
      if(btnType === "巡视") {
        // 如果已巡视，跳转到"已巡视光缆-纤芯核查列表"
        if(item.XSJG.includes("已巡视")) {
          uni.navigateTo({
            url: `/pages/workBench/todoTask/cableTour/cableDetail/cableDetail?tourId=${item.OBJ_ID}`
          });
        }
        // 如果未巡视，跳转到光缆核查
        else {
          uni.navigateTo({
            url: `/pages/workBench/todoTask/cableTour/cableInspect?fiberId=${item.FIBER_ID}&tourId=${item.OBJ_ID}`
          });
        }
      }
      
      else if(btnType === "查看") {
        uni.navigateTo({
          url: `/pages/workBench/todoTask/cableTour/cableDetail/cableDetail?tourId=${item.OBJ_ID}`
        });
      }
    },
    // 筛选确认
    confirmCondition(selected) {
      this.requestParams = {
        ...this.requestParams,
        ...selected,
      };
      this.onRefresh();
    },
    // 未完成/已完成tab切换
    tabChange(currentTab) {
      this.currentTab = currentTab;
      (this.currentTab === "finished") && (this.requestParams.tour_state = "1");
      (this.currentTab === "unfinished") && (this.requestParams.tour_state = "0");
      this.onRefresh();
    },
    // 获取光缆列表
    getFiberList() {
      this.$api.todoTaskApi.fiberList(this.requestParams).then(res => {
        this.isLoading = false;
        this.refreshing = false;
        this.taskList = this.taskList.concat(res.data.fiberList);
        if (this.typeList.length === 0) {
          res.data.fiber_type.forEach(item => {
            (item.TITLE === '全部') && (item.VALUE = '');
          })
          this.typeList = [{
            title: "光缆种类",
            optionList: res.data.fiber_type,
            type: "fiber_type"
          }]; 
        }

        this.total = +res.data.total_number;
      });
    },
    // 设置已完成光缆巡视结果的颜色
    fontColor(XSJG) {
      if(XSJG.includes("一致")) return "#417ADC";
      if(XSJG.includes("不存在")) return "#FF5F5E";
      if(XSJG.includes("更新")) return "#FFAD0E";
      if(XSJG.includes("新增")) return "#41DC83";
    }
  }
};
</script>
<style scoped lang="scss">
.patrol-task {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  overflow: hidden;
  
  .header {
    img {
      width: px2vw(48);
      margin-right: px2vw(40);
    }
    
  }
  
  .header-bar {
    height: px2vh(220);
    border-radius: 0 0 px2vh(40) px2vh(40);
    background: #417ADC;
    // margin-bottom: px2vh(130);
    display: flex;
    justify-content: center;
    
    .get-state-tab {
      width: calc(100% - #{px2vw(60)});
      height: px2vh(120);
      border-radius: px2vw(20);
      box-sizing: border-box;
      // margin: px2vh(40) px2vw(30) px2vh(37);
      background-color: rgba(255, 255, 255, 0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      border: px2vw(2) solid rgba(198, 215, 245, 1);
      
      .info-tab-item {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(255, 255, 255, 1);
        font-weight: bold;
        font-size: px2vw(38);
        
        &.info-tab-current {
          height: px2vh(100);
          margin: 0 px2vw(10);
          margin-right: px2vw(10);
          border-radius: px2vw(20);
          background-color: rgba(255, 255, 255, 0.7);
          color: rgba(65, 122, 220, 1);
          font-weight: Bold;
        }
      }
    }
  }
  
  .patrol-search {
    width: px2vw(1020);
    height: 38px;
    margin: px2vw(30) px2vh(30);
    position: relative;
    top: px2vh(-75);
    border-radius: px2vw(20);
    overflow: hidden;
    
    .van-search {
      padding: 0 0;
      height: 38px;
      
    }
    
    .van-search__content {
      background: #fff;
      height: 38px;
    }
    
    /deep/ .van-field__control {
      height: 30px;
    }
  }
  
  .patrol-main {
    height: calc(100vh - #{px2vh(423)} - 20px);
    overflow: auto;
    margin-top: px2vh(-65);
    
    .patrol-list {
      width: px2vw(1020);
      //height: px2vh(420);
      background: #fff;
      border-radius: px2vw(20) px2vh(20);
      padding-bottom: px2vh(30);
      margin: 0 px2vw(30) px2vh(30) px2vw(30);
      
      .patrol-title {
        width: px2vw(940);
        //height: px2vh(80);
        margin-left: px2vw(40);
        padding-top: px2vw(30);
        margin-bottom: px2vh(30);
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        img {
          width: px2vw(64);
          height: px2vw(64);
          margin-top: px2vh(6);
          float: left;
        }
        
        .partrol-main-title {
          //width: px2vw(600);
          margin-left: px2vw(20);
          margin-top: px2vh(8);
          font-size: px2vh(48);
          //white-space: nowrap;
          //overflow: hidden;
          //text-overflow: ellipsis;
          //float: left;
        }
        
        .patrol-btn {
          width: px2vw(200);
          height: px2vh(80);
          background: #417ADC;
          float: right;
          border-radius: px2vw(40) px2vh(40);
        }
      }
      
      .patrol-hr {
        width: px2vw(940);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
        margin-bottom: px2vh(42);
      }
      
      .top-patrol-main {
        position: relative;
        width: px2vw(900);
        font-size: px2vh(36);
        line-height: px2vh(62);
        margin-left: px2vw(60);
        
        .patrol-big-ltitle, .patrol-big-rtitle {
          color: #666;
        }
        
        .patrol-small-ltitle, .patrol-small-rtitle {
          color: #333;
        }
  
        .patrol-btn {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: px2vw(200);
          height: px2vh(80);
          background: #417ADC;
          //float: right;
          border-radius: px2vw(40) px2vh(40);
        }
      }
      
      .bottom-state-bar {
        margin-left: px2vw(60);
        width: px2vw(900);
        display: flex;
        justify-content: space-between;
        line-height: px2vh(62);
        font-size: px2vh(36);
  
        .patrol-big-ltitle, .patrol-big-rtitle {
          color: #666;
        }
        .red {
          .patrol-big-ltitle, .patrol-small-ltitle {
            color: #FF5F5E;
          }
        }
      }
    }
  }
}
</style>